<template>
  <div class="line-main" id="box" ref="dom"></div>
</template>

<script>
import echarts from "echarts";
import tdTheme from "./theme.json";
import { on, off } from "./util";
echarts.registerTheme("tdTheme", tdTheme);
export default {
  props: {
    value: Object,
    text: String,
    subtext: String
  },
  mounted() {
    this.initChart();
  },
  methods: {
    resize() {
      this.dom.resize();
    },
    initChart() {
      this.$nextTick(() => {
        let option = {
          grid: {
            left: "1%",
            right: "1%",
            top: "10%",
            bottom: "1%",
            containLabel: true
          },
          title: {
            text: this.text,
            subtext: this.subtext,
            x: "center"
          },
          tooltip: {
            trigger: "item",
            formatter: function(params) {
              return `${params.seriesName}: ${params.value} 人`; // 显示产品名称和数量
            },
            position: "top",
            backgroundColor: "#387DE1",
            textStyle: {
              fontSize: 18,
              color: "#fff"
            }
          },
          legend: {
            data: this.value.legend,
            left: "center"
          },
          xAxis: {
            show: true,
            type: "category",
            data: this.value.xaxisData,
            splitLine: {
              show: false
            }
          },
          yAxis: [
            {
              // show: false,
              type: "value",
              splitLine: {
                show: true,
                lineStyle: {
                  // 设置刻度线粗度(粗的宽度)
                  width: 1,
                  // 颜色数组，数组数量要比刻度线数量大才能不循环使用
                  color: [
                    "rgba(0, 0, 0, 0)",
                    "#eee",
                    "#eee",
                    "#eee",
                    "#eee",
                    "#eee",
                    "#eee",
                    "#eee",
                    "#eee"
                  ]
                }
              }
            }
          ],
          series: this.value.series
        };
        this.dom = echarts.init(this.$refs.dom, "tdTheme");
        this.dom.setOption(option,true);
        on(window, "resize", this.resize);
      });
    }
  },
  watch: {
    value: function(newQuestion, oldQuestion) {
      this.initChart();
    }
  }
};
</script>

<style>
.line-main {
  width: 100%;
  height: 360px;
  padding: 28px;
  background: #fff;
}
</style>
